<template>
  <loading v-if="listLoading"></loading>
  <div v-else>
    <div class="top-box">
      <el-button type="warning" @click="adduser">添加管理员</el-button>
    </div>
    <div  class="pd">
      <el-table :data="user.list" border fit highlight-current-row >
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="登录账号" prop="username"></el-table-column>
        <el-table-column label="团队管理员" prop="name"></el-table-column>
        <el-table-column label="角色" prop="role"></el-table-column>
        <el-table-column label="服务公众号" prop="service"></el-table-column>
        <el-table-column label="团队名称" prop="team"></el-table-column>
        <el-table-column label="团队logo">
          <template scope="scope">
            <img :src="scope.row.logo" class="row-logo" v-if="scope.row.logo!==null">
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="created_at"></el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <i class="icon-check i-icon" title="查看团队成员" @click="check(scope.row)" v-if="scope.row.name !== 'Administrator'"></i>
            <i class="icon-revamp i-icon"  title="修改管理员" @click="edit(scope.row, 'leader')"></i>
            <i class="icon-delete i-icon" title="删除管理员" @click="del(scope.row.id)" v-if="scope.row.name !== 'Administrator'"></i>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pageall"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="user.total">
        </el-pagination>
      </div>
      <!--编辑管理员-->
      <el-dialog :visible.sync="userShow" title="修改管理员信息">
        <div class="input-group">
          <label>登录账号：</label>
          <div class="input-group-box"><el-input v-model="username" disabled></el-input></div>
        </div>
        <div class="input-group">
          <label>登录密码：</label>
          <div class="input-group-box"><el-input v-model="password" type="password" placeholder="输入登录密码"></el-input></div>
        </div>
        <div class="input-group">
          <label>服务公众号：</label>
          <div class="input-group-box">
            <el-select v-model="appid" placeholder="请选择" disabled>
              <el-option
                v-for="item in appids"
                :key="item[0]"
                :label="item[1]"
                :value="item[0]">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="input-group">
          <label>团队管理员：</label>
          <div class="input-group-box">
            <el-input v-model="name" placeholder="团队管理员"></el-input>
          </div>
        </div>
        <div class="input-group">
          <label>角色：</label>
          <div class="input-group-box">
            <el-select v-model="role" placeholder="请选择">
              <el-option
                v-for="item in roles"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="margin-top:20px;text-align:right">
          <el-button  @click="c_user">取消</el-button>
          <el-button type="primary" @click="e_user">确定</el-button>
        </div>
      </el-dialog>
      <!--编辑团队成员-->
      <el-dialog :visible.sync="numberShow" title="修改团队成员信息">
        <div class="input-group">
          <label>登录账号：</label>
          <div class="input-group-box"><el-input v-model="username" disabled></el-input></div>
        </div>
        <div class="input-group">
          <label>登录密码：</label>
          <div class="input-group-box"><el-input v-model="password" type="password" placeholder="输入登录密码"></el-input></div>
        </div>
        <div class="input-group">
          <label>服务公众号：</label>
          <div class="input-group-box">
            <el-select v-model="appid" placeholder="请选择" disabled>
              <el-option
                v-for="item in appids"
                :key="item[0]"
                :label="item[1]"
                :value="item[0]">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="input-group">
          <label>营养师姓名：</label>
          <div class="input-group-box">
            <el-input v-model="name" placeholder="营养师姓名"></el-input>
          </div>
        </div>
        <div class="input-group">
          <label>角色：</label>
          <div class="input-group-box">
            <el-select v-model="role" placeholder="请选择">
              <el-option
                v-for="item in nutritionist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="margin-top:20px;text-align:right">
          <el-button  @click="c_user">取消</el-button>
          <el-button type="primary" @click="e_user">确定</el-button>
        </div>
      </el-dialog>
      <!--添加-->
      <el-dialog :visible.sync="add.addShow" title="添加管理员">
        <div class="input-group">
          <label>登录账号：</label>
          <div class="input-group-box"><el-input v-model="add.username" placeholder="登录账号生成后不再能修改" @blur="checkname(add.username)"></el-input></div>
        </div>
        <div class="input-group">
          <label>登录密码：</label>
          <div class="input-group-box"><el-input v-model="add.newpwd" type="password" placeholder="输入登录密码" @blur="pwd"></el-input></div>
        </div>
        <div class="input-group">
          <label>确认密码：</label>
          <div class="input-group-box"><el-input v-model="add.pwd" type="password" placeholder="输入密码" @blur="repwd"></el-input></div>
        </div>
        <div class="input-group">
          <label>团队管理员：</label>
          <div class="input-group-box"><el-input v-model="add.name" placeholder="输入团队管理员"></el-input></div>
        </div>
        <div class="input-group">
          <label>服务公众号：</label>
          <div class="input-group-box">
            <el-select v-model="add.appid" placeholder="请选择">
              <el-option
                v-for="item in appids"
                :key="item[0]"
                :label="item[1]"
                :value="item[0]">
              </el-option>
            </el-select>
            <span class="tip-note">&nbsp;&nbsp;* 提交后不可修改</span>
          </div>
        </div>
        <div class="input-group">
          <label>角色：</label>
          <div class="input-group-box">
            <el-select v-model="add.role" placeholder="请选择">
              <el-option
                v-for="item in roles"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="margin-top:20px;text-align:right">
          <el-button  @click="c_add">取消</el-button>
          <el-button type="primary" @click="e_add">确定</el-button>
        </div>
      </el-dialog>
      <!--查看团队成员-->
      <el-dialog :visible.sync="checkShow" title="团队成员列表">
        <el-table
          :data="teamList"
          stripe
          style="width: 100%">
          <el-table-column
            prop="id"
            label="ID"
            width="80">
          </el-table-column>
          <el-table-column
            prop="username"
            label="登录账号">
          </el-table-column>
          <el-table-column
            prop="name"
            label="营养师名称">
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="创建时间">
          </el-table-column>
          <el-table-column
            prop="role"
            label="角色">
          </el-table-column>
          <el-table-column label="操作">
          <template scope="scope">
            <i class="icon-revamp i-icon"  title="修改" @click="edit(scope.row, 'number')"></i>
          </template>
        </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>
<style>
.row-logo {
  width: 60px;
  height: 60px;
  padding: 5px;
}
</style>
<script>
import config from '../../utils/config'
import crypt from '../../utils/crypto-helper-pkcs7'
import axios from 'axios'
import loading from '../../components/loading'
export default {
  data () {
    return {
      user: [],
      pageall: 1,
      page: 1,
      pageSize: 20,
      listLoading: true,
      name: '',
      username: '',
      appid: '',
      password: '',
      role: '',
      eid: '',
      appids: [],
      roles: [],
      nutritionist: [],
      userShow: false,
      numberShow: false,
      add: {
        addShow: false,
        username: '',
        name: '',
        appid: '',
        newpwd: '',
        pwd: '',
        role: ''
      },
      teamList: [],
      checkShow: false
    }
  },
  components: {
    loading
  },
  created () {
    this.getuser()
    var param = {
      match: ''
    }
    var paramjson = JSON.stringify(param)
    var params = crypt.encrypt(paramjson)
    axios.get(config.domain + config.urls.getappid + '?param=' + params)
    .then(res => {
      var response = res.data
      if (response.errcode === 200) {
        this.appids = response.data.appid
        this.roles = response.data.role
        this.nutritionist = response.data.nutritionist
      } else if (response.errcode === 200103) {
        this.$confirm('登录过期，请重新登录')
        .then(_ => {
          window.sessionStorage.clear()
          this.$router.push('/admin/login')
        })
        .catch(_ => {})
      }
    })
    .catch(error => {
      console.log(error)
    })
  },
  methods: {
    getuser () {
      this.listLoading = true
      var param = {
        page: this.page
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.user + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.user = response.data
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        }
        this.listLoading = false
      })
      .catch(error => {
        console.log(error)
      })
    },
    handleCurrentChange (val) {
      this.page = val
      this.getuser()
    },
    del (id) {
      var param = {
        id: id
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      this.$confirm('确认要删除此条信息吗？')
      .then(_ => {
        axios.get(config.domain + config.urls.deluser + '?param=' + params)
        .then(res => {
          var response = res.data
          if (response.errcode === 200) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 1500
            })
            this.getuser()
          } else if (response.errcode === 200103) {
            this.$confirm('登录过期，请重新登录')
            .then(_ => {
              window.sessionStorage.clear()
              this.$router.push('/admin/login')
            })
            .catch(_ => {})
          } else {
            this.$notify({
              title: '失败',
              message: '删除失败',
              type: 'error',
              duration: 1500
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
      })
      .catch(_ => {})
    },
    edit (item, object) {
      this.eid = item.id
      if (object === 'number') {
        this.numberShow = true
      } else {
        this.userShow = true
      }
      this.name = item.name
      this.appid = item.appid
      this.username = item.username
      this.password = item.password
      this.role = item.role_id
    },
    e_user () {
      if (this.password === '') {
        this.$notify({
          title: '警告',
          message: '密码为空',
          type: 'error',
          duration: 1500
        })
        return false
      } else if (this.name === '') {
        this.$notify({
          title: '警告',
          message: '营养师为空',
          type: 'error',
          duration: 1500
        })
        return false
      } else if (this.role === '') {
        this.$notify({
          title: '警告',
          message: '角色未选择',
          type: 'error',
          duration: 1500
        })
        return false
      } else if (this.appid === '') {
        this.$notify({
          title: '警告',
          message: '服务公众号未选择',
          type: 'error',
          duration: 1500
        })
        return false
      } else {
        var param = {
          username: this.username,
          password: this.password,
          appid: this.appid,
          name: this.name,
          id: this.eid,
          role_id: this.role
        }
        axios.post(config.domain + config.urls.edituser, param)
        .then(res => {
          var data = res.data
          if (data.errcode === 200) {
            this.$notify({
              title: '成功',
              message: '信息修改成功',
              type: 'success',
              duration: 1500
            })
            this.userShow = false
            this.numberShow = false
            this.checkShow = false
            this.getuser()
          } else if (data.errcode === 200103) {
            this.$confirm('登录过期，请重新登录')
            .then(_ => {
              window.sessionStorage.clear()
              this.$router.push('/admin/login')
              return false
            })
            .catch(_ => {})
          }
        })
        .catch(error => {
          console.log(error)
        })
      }
    },
    c_user () {
      this.userShow = false
    },
    adduser () {
      this.add.addShow = true
      this.add.username = ''
      this.add.pwd = ''
      this.add.newpwd = ''
      this.add.appid = ''
      this.add.name = ''
      this.add.role = ''
    },
    c_add () {
      this.add.addShow = false
    },
    e_add () {
      if (this.add.username === '') {
        this.$notify({
          title: '警告',
          message: '登录账号为空',
          type: 'error',
          duration: 1500
        })
        return false
      } else if (this.add.pwd === '') {
        this.$notify({
          title: '警告',
          message: '密码为空',
          type: 'error',
          duration: 1500
        })
        return false
      } else if (this.add.name === '') {
        this.$notify({
          title: '警告',
          message: '团队管理员为空',
          type: 'error',
          duration: 1500
        })
        return false
      } else if (this.add.appid === '') {
        this.$notify({
          title: '警告',
          message: '服务公众号未选择',
          type: 'error',
          duration: 1500
        })
        return false
      } else if (this.add.role === '') {
        this.$notify({
          title: '警告',
          message: '角色未选择',
          type: 'error',
          duration: 1500
        })
        return false
      } else {
        this.checkname(this.add.username)
        var param = {
          username: this.add.username,
          password: this.add.pwd,
          appid: this.add.appid,
          name: this.add.name,
          role_id: this.add.role
        }
        axios.post(config.domain + config.urls.adduser, param)
        .then(res => {
          var data = res.data
          if (data.errcode === 200) {
            this.$notify({
              title: '成功',
              message: '管理员添加成功',
              type: 'success',
              duration: 1500
            })
            this.c_add()
            this.getuser()
          } else if (data.errcode === 200103) {
            this.$confirm('登录过期，请重新登录')
            .then(_ => {
              window.sessionStorage.clear()
              this.$router.push('/admin/login')
              return false
            })
            .catch(_ => {})
          }
        })
        .catch(error => {
          console.log(error)
        })
      }
    },
    pwd () {
      if (this.add.newpwd === '') {
        this.$notify({
          title: '警告',
          message: '登录密码为空',
          type: 'error',
          duration: 1500
        })
        return false
      } else if (this.add.pwd === '') {
        return false
      } else if (this.add.newpwd !== this.add.pwd) {
        this.$notify({
          title: '警告',
          message: '两次密码输入不一致',
          type: 'error',
          duration: 1500
        })
        return false
      }
    },
    repwd () {
      if (this.add.pwd === '') {
        this.$notify({
          title: '警告',
          message: '再次输入登录密码为空',
          type: 'error',
          duration: 1500
        })
        return false
      } else if (this.add.newpwd === '') {
        this.$notify({
          title: '警告',
          message: '登录密码为空',
          type: 'error',
          duration: 1500
        })
        return false
      } else if (this.add.newpwd !== this.add.pwd) {
        this.$notify({
          title: '警告',
          message: '两次密码输入不一致',
          type: 'error',
          duration: 1500
        })
        return false
      }
    },
    check (row) {
      this.checkShow = true
      this.teamList = row.member
    },
    checkname (value) {
      var param = {
        user: value
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.checkname + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          if (response.data.state === true) {
            this.$notify({
              title: '警告',
              message: '账号已经存在',
              type: 'error',
              duration: 1500
            })
            return false
          }
        }
      })
      .catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

